<template>
  <el-dialog
    v-model="dialogVisible"
    title="设置地点"
    width="60%"
    :before-close="handleClose"
  >
    <div class="location-dialog">
      <!-- 地图区域 -->
      <div class="map-container">
        <div class="map-placeholder">
          <el-icon size="48" color="#409EFF">
            <Location />
          </el-icon>
          <p>地图选择区域</p>
          <p>这里可以集成地图组件来选择具体位置</p>
        </div>
      </div>

      <!-- 位置信息 -->
      <div class="location-info">
        <el-form label-width="100px">
          <el-form-item label="位置名称">
            <el-input
              v-model="locationName"
              placeholder="请输入位置名称"
            />
          </el-form-item>
          <el-form-item label="详细位置">
            <el-input
              v-model="detailedLocation"
              type="textarea"
              :rows="3"
              placeholder="请输入详细位置信息"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Location } from '@element-plus/icons-vue'

// Props
const props = defineProps<{
  modelValue: boolean
}>()

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'select': [location: any]
}>()

// 响应式数据
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const locationName = ref('天堂市天堂区天堂街道52号')
const detailedLocation = ref('')

// 方法
const handleClose = () => {
  dialogVisible.value = false
}

const handleConfirm = () => {
  const location = {
    name: locationName.value,
    address: detailedLocation.value || locationName.value,
    fullAddress: detailedLocation.value ? `${locationName.value} ${detailedLocation.value}` : locationName.value
  }
  emit('select', location)
  dialogVisible.value = false
}
</script>

<style scoped>
.location-dialog {
  display: flex;
  gap: 20px;
}

.map-container {
  flex: 1;
  min-height: 300px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #f8f9fa;
  color: #666;
}

.map-placeholder p {
  margin: 8px 0;
  text-align: center;
}

.location-info {
  flex: 1;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 